<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.mui-bar .mui-pull-left .mui-icon{
				padding-right: 5px;
				font-size: 28px;
			}
			.mui-bar .mui-btn{
				font-weight: normal;
				font-size: 17px;
			}
			.mui-bar .mui-btn-link{
				top: 1px;
			}
		</style>
	</head>
	<body>

	<header id="header" class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">导航栏</h1>
	</header>
	
	<div class="mui-content">
		<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面，
			你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；</p>
		<h5 class="mui-content-padded">左侧显示内容</h5>
		<form class="mui-input-group">
			<div class="mui-input-row mui-radio">
				<label>不显示</label>
				<input name="style" type="radio" value="left-none">
			</div>
			<div class="mui-input-row mui-radio">
				<label>仅图标</label>
				<input name="style" type="radio" checked value="left-icon">
			</div>
			<div class="mui-input-row mui-radio">
				<label>图标加文字按钮</label>
				<input name="style" type="radio" value="left-btn">
			</div>
		</form>
		<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
		<form class="mui-input-group" style="margin-bottom: 15px;">
			<div class="mui-input-row mui-radio">
				<label>不显示</label>
				<input name="style" type="radio" checked="" value="right-none">
			</div>
			<div class="mui-input-row mui-radio">
				<label>仅图标</label>
				<input name="style" type="radio" value="right-icon">
			</div>
			<div class="mui-input-row mui-radio">
				<label>文字按钮</label>
				<input name="style" type="radio" value="right-btn">
			</div>
		</form>
	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/app.js"></script>
	<script type="text/javascript">
		mui.init();
		var header = document.getElementById("header");
		//左侧icon
		var lefticon = document.createElement('a');
		lefticon.className ='mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
		//左侧图标+文字按钮
		var leftbtn = document.createElement('button');
		leftbtn.className ='mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
		
		var span = document.createElement('span');
		span.className = 'mui-icon mui-icon-left-nav';
		leftbtn.appendChild(span);
		var text = document.createTextNode('首页');
		leftbtn.appendChild(text);
		
		//右侧icon
		var righticon = document.createElement('a');
		righticon.className ='mui-icon mui-icon-bars mui-pull-right';
		//右侧文字按钮
		var rightbtn = document.createElement('button');
		rightbtn.className ='mui-btn mui-btn-blue mui-btn-link mui-pull-right';
		rightbtn.innerText = '编辑';
		
		//删除原先存在的节点
		function remove(selector){
			var elem = header.querySelector(selector);
			if(elem){
				header.removeChild(elem);
			}
		}
		
		
		mui('.mui-input-group').on('change','input',function () {
			if(this.checked){
				switch (this.value){
					case 'left-none':
						remove('.mui-pull-left')
						break;
					case 'left-icon':
						remove('.mui-pull-left');
						header.appendChild(lefticon);
						break;
					case 'left-btn':
						remove('.mui-pull-left');
						header.appendChild(leftbtn);
						break;
					case 'right-none':
						remove('.mui-pull-right');
						break;
					case 'right-icon':
						remove('.mui-pull-right')
						header.appendChild(righticon);
						break;
					case 'right-btn':
						remove('.mui-pull-right');
						header.appendChild(rightbtn);
						break;
				}
			}
		});
	</script>
	
	</body>
</html>